<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>jue</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/page.js" ></script> -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script>
	<style type='text/css'>
  .bg-purple {
  	margin-top:10px;
  	height:20px;
    /*background: #d3dce6;*/
  }
    .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .span_text{
  	cursor: pointer;
  	
  }
  .span_text:hover{
  	color:#0080FF;
  }
	</style>
</head>
<body>
	<div id="pageAll">
		<div class="pageTop">
			<div class="page">
				<img src="img/coin02.png" /><span><a href="#">控制台</a>&nbsp;-&nbsp;<a
					href="#">权限管理</a>&nbsp;-</span>&nbsp;用户管理
			</div>
		</div>

		<div class="page">
			<!-- wish页面样式 -->
			<div class="wish">
				<div class="conform">
					<form>
						<div class="cfD">
  <el-input placeholder="请输入内容" v-model="input23" style="width:200px;">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
<template>
  <el-select v-model="value" placeholder="角色名" style="width:110px;">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>

</template>
	
	</div>
					</form>
				</el-col>
  		<el-col :span="24">
  			<div class="grid-content bg-purple" >
  			角色信息&nbsp;<span style="color:darkkhaki;font-size: 8px;">共4条</span>
  			<!--<div style="width:100px;height:30px;border:1px solid 	#D9D9D9;float:right;padding-top:5px;text-align:center;border-radius: 4px;">
  			<i class="el-icon-circle-plus-outline"></i>	新增角色
  			</div>
  		</div>	-->
  		<el-row style="float:right">
  		 <el-button type="success"  style="border-radius: 4px;height:35px;padding-top:10px;" @click="visible = true"><i class="el-icon-circle-plus-outline"></i>&nbsp;新建角色</el-button>
		</el-row>
  		</el-col>

				</div>
				<!-- wish 表格 显示 -->
				<div class="wishShow">
					<table border="1" cellspacing="0" cellpadding="0">
						<tr>
							<!--<td width="40px" class="tdColor">ID</td>-->
							<td width="66px" class="tdColor"><input type="radio" name="radio1" value="1"></td>
							<td width="66px" class="tdColor">ID</td>
							<td width="300px" class="tdColor">角色名称</td>
							<td width="300x" class="tdColor">状态</td>
							<td width="330px" class="tdColor">角色描述</td>
							<td width="240px" class="tdColor">操作</td>
						</tr>
						<tr>
							<td><input type="radio" name="radio2" value="2"></td>
							<td>1</td>
							<td><span class="span_text" @click="visible = true"><i class="el-icon-back"></i>销售员</span></td>
							<td>启用</td>
							<td>数据库没有这个描述</td>						
							<td>
							<i class="el-icon-edit" @click="visible = true"></i>
							&nbsp;
							<i class="el-icon-delete" @click="open2"></i>
							</td>
						</tr>
					</table>
					<div class="paging">
						<template>
						  <div class="block">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>
  </div>
</template>
</div>
				</div>
				<!-- wish 表格 显示 end-->
			</div>
			<!-- wish页面样式end -->
		</div>
	</div>
	
  	<el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
	<!-- 删除弹出框 -->

	</div>
	<!-- 删除弹出框  end-->
</body>

<script type="text/javascript">
// 广告弹出框
$(".delban").click(function(){
  $(".banDel").show();
});
$(".close").click(function(){
  $(".banDel").hide();
});
$(".no").click(function(){
  $(".banDel").hide();
});
// 广告弹出框 end
var Main = {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '角色编号'
        }, {
          value: '选项2',
          label: '高级查询'
        }],
        value: '',
        input23: '',
        visible: false,
         currentPage4: 4
      }
    },
     methods: {
     	      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
            handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      open2() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('div')
</script>
</html>